<template>
    <div class="qrcanvas-increase">
        <a-modal v-model:visible="visibleQRQrCode" title="查询成绩二维码">
            <a-spin size="large" :spinning="spinning">
                <div class="qr-img-box">
                    <img :src="queryResultsImgUrl" v-if="queryResultsImgUrl"/>
                    <span v-else>二维码正在生成中</span>
                </div>
                <div style="display: flex;justify-content: center;margin-top: 15px;" v-if="queryResultsImgUrl">
                    <a-button class="blue-btn" type="primary" @click="downloadQRCode(queryResultsImgUrl)">下载二维码</a-button>
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {qrcanvas} from 'qrcanvas'
export default {
    components:{
    },
    props:{
    },
    data(){
        return{
            spinning:true,
            visibleQRQrCode:false,
            testPaper:{},
            newImage:new Image(),
            queryResultsQr:null,
            queryResultsImgUrl:''
        }
    },
    watch:{
        visibleQRQrCode(newval,oldVal){
            if(newval){
                this.queryResultsQr = qrcanvas({
                    data: bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+`queryResults`   || "二维码生成中",
                    size:260,
                    background:'#fff'
                })
                this.queryResultsImgUrl = this.newImage.src = this.queryResultsQr.toDataURL("image/png")
                //console.log(bootConfig[process.env.NODE_ENV])
                //console.log(bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+`queryResults`)
            }
        },
        downloadQRCode(val){
            var a = document.createElement("a");
            a.href = val;
            a.setAttribute('download', '试卷二维码');
            a.click();
            message.success('已下载')
        },
        
    },
    mounted(){
        
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
            //console.log('执行定时器了')
        },
    }

}

</script>
<style>
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .test-paper-modal .ant-modal-footer{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .paper-details{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
 }
 .qr-img-box{
    display: flex;
    justify-content: center;
 }
.qrcanvas-increase .ant-modal-content{
    width: 520px !important;
 }
</style>